<template>
  <div>
    <van-nav-bar
      title="乐购"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box">
      <div class="item">
        <div class="first">
          <p>{{ list.address.name }}</p>
          <p><van-tag plain type="danger">默认</van-tag></p>
        </div>
        <div class="middle">
          <p>{{ list.address.mobile }}</p>
          <p>{{ list.address.address }}</p>
        </div>
        <div @click="getAddress" class="last"></div>
      </div>
    </div>
    <p></p>
    <!-- <p></p>
    <p></p> -->
    <van-cell-group>
      <van-cell title="商品合计" :value="list.allPrise" />
      <van-cell title="运费" value="免运费" />
      <van-cell title="优惠券" value="暂无" />
    </van-cell-group>
    <div v-for="item in list.goodsList" :key="item.id">
      <van-card
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
      />
    </div>

    <van-submit-bar
      :price="list.allPrise"
      button-text="支付"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { detailAction } from "@/api/cart/order";
export default {
  data() {
    return {
      // currentContact: {},
      list: {},
      address: {},
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  computed: {
    // total() {
    //     return this.list.reduce((total, current) => {
    //         return total + current.number * current.retail_price * 100;
    //     }, 0);
    //   },
  },
  methods: {
    // init() {
    //   detailAction({
    //     openId: localStorage.getItem("openId"),
    //     addressId: "",
    //   }).then((res) => {
    //     console.log(res);
    //     this.list = res;
    //     var address = localStorage.getItem("address");
    //     if (address) {
    //       this.address = address;
    //     } else {
    //       this.address = res.address;
    //     }
    //   });
    // },
    async init() {
      this.list = await detailAction({
        openId: localStorage.getItem('openId'),
        addressId: localStorage.getItem('addressId') || ''
      })
      console.log(this.list)
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      alert("支付功能未开通");
    },
    getAddress() {
      this.$router.push("/cart/addressEdit");
    },
  },
};
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 100px;
  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png)
    0 0 repeat-x #fff;
  padding: 0.66667rem 0 0.4rem 0;
  margin-bottom: 0.26667rem;
  .list {
    width: 100%;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item {
    width: 100%;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    P {
      margin-left: 0.625rem;
    }
    .first {
      width: 1.33333rem;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      align-self: flex-start;
    }
    .middle {
      padding: 0 0.26667rem;
      flex: 1;
    }
    .last {
      width: 0.66667rem;
      height: 0.66667rem;
      margin: 0 0.26667rem;
      background: url(http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-right-596d39df1e.png)
        no-repeat;
      background-size: 100% 100%;
    }
  }
}
.van-button {
  bottom: 0.026667rem;
}
</style>